<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>店铺-客流滞留分析</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css">			
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/reg_style.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/ljq.css" />
		<link rel="stylesheet" type="text/css" href="css/ljq-post.css" />
	
		<style>.zong {
	border-bottom: 5px solid #eee;
}

.xianshi {
	background: url(img/zhiliubeijing.png)no-repeat center center;
	padding: 0.15rem 0;
}

.xianshi div {
	float: left;
	width: 50%;
}

.xianshi em {
	display: block;
	width: 90%;
	font-size: 0.12rem;
	color: #fff;
}

.xianshi .zhiliu em {
	margin-left: 10%;
	text-align: left;
}

.xianshi .pingjun em {
	margin-right: 10%;
	text-align: right;
}

.xianshi .em1 {
	text-align: center!important;
	font-weight: 200;
}

.xianshi .em2 {
	margin-top: 0.13rem;
}

.xianshi .em3 {
	margin-top: 0.06rem;
}

.head1 em {
	float: left;
	width: 0.23rem;
	height: 0.44rem;
}</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav head1">
			<em class="mui-action-back"><img class="img1 tiao_main0" src="img/fanhui.png" alt="" /></em>
			<div class="div1"><span class="span0" id="list-shop-lists" onclick="user_select_shop();">客流滞留分析</span></div>
			<img class="img2" src="img/problem.png" onclick="time_img(keliuzhiliu);"/>
		</header>
		<div class="mui-content">
			<div class="zong">
				<div class="div4 clearfix">
					<span class="span4">选择时间</span>
					<em data-options='{"type":"date","beginYear":1949,"endYear":3016}' id="index-compare1_date" class="em4 em4_time"></em>
				</div>
				<div class="div4 clearfix">
					<span class="span4">选择时间</span>
					<em data-options='{"type":"date","beginYear":1949,"endYear":3016}' id="index-compare2_date" class="em4 em4_time"></em>
				</div>
			</div>
			<div class="xianshi clearfix ">

				<div class="zhiliu">
					<em id='index-store-klzlfx-max-name' class="em1">最大滞留</em>
					<em class="em2">时间：<span id='index-store-klzlfx-max-datetime'></span></em>
					<em class="em3">人数：<span id='index-store-klzlfx-max-max_person'></span>人</em>
				</div>
				<div class="pingjun">
					<em id='index-store-klzlfx-avg-name' class="em1">当天平均</em>
					<em class="em2"><span id='index-store-klzlfx-avg-date-1'></span>：<span id='index-store-klzlfx-avg-average_person-1'></span>人/小时</em>
					<em class="em3"><span id='index-store-klzlfx-avg-date-2'></span>：<span id='index-store-klzlfx-avg-average_person-2'></span>人/小时</em>
				</div>
			</div>

			<!--<div class="zongtu" style="margin-bottom: 0.5rem;background: #fff;">
				<div class="tu_graphic clearfix" style="margin-top: 0.3rem;">
					<div class="title0" id='index-graphic-data1-name'></div>
					<div id="statistics_turnover1" class="main_graphic"></div>
				</div>
			</div>-->
			
			<div id="mychart" class="chart" style="width: 100%; height: 2.5rem; border: 0px solid #333;margin-top: 0.25rem;"></div>			
			
		</div>

		<!--/********************日期控件**************************/-->
		<!--<link rel="stylesheet" type="text/css" href="css/hgs-date.css" />
		<script src="js/hgs-date.js"></script>-->
		<!--/********************日期控件**************************/-->
		<span id="index-date-show" style="display: none;"></span>
		<input id="index-shop-lists-id" type="hidden">
		<input id="index-shop-lists" type="hidden">
		<input id='index-end-date' type="hidden" />
		<input id='index-start-date' type="hidden" />

		<!--/***************************************************/-->

		<script src="js/mui.min.js"></script>
		<script src="js/mui.enterfocus.js"></script>
		<script src="js/app.js"></script>
		<!--<script type="text/javascript" src="js/jsencrypt.min.js"></script>
		<script src="js/md5.js"></script>-->
		<script src="js/crypto-js.js"></script>
		<script src="js/jquery.js"></script>
		<script type="text/javascript" src="js/common.js?ver=20180122"></script>
		<script type="text/javascript" src="js/fuction.js?ver=20180122"></script>
		<script src="js/echarts.js"></script>
		<script src="js/mui.picker.min.js"></script>
		<script src="js/chart-zx-and-zx-0-oneline.js?ver=20180122"></script>		<!--//折线与折线并且 有渐变效果	-->
		<script src="js/ljq_biaoqiao.js"></script>		<!--//标签	-->	
		<script type="text/javascript">
			mui.init();
		</script>
		<script>
			
			var xtoday = GetDateStr(0);
				
			mui.ready(function() {
				//获取当前的客户数据
				xminereadyload();				
				//获取当天的日期

				mui("#index-date-show")[0].innerHTML = xtoday;
				mui("#index-start-date")[0].value = xtoday;
				mui("#index-end-date")[0].value = xtoday;

				mui("#index-compare1_date")[0].innerHTML = xtoday;
				mui("#index-compare2_date")[0].innerHTML = xtoday;



				//获取首页信息-获取客流滞留分析
				statistics_passengerretention();

			});

			//获取店铺信息-获取客流滞留分析
			function statistics_passengerretention() {
				var xbx = {}; //登录后的参数对象AES加密
				xbx.shop_id = user_info.look_shop_id; //是 店铺ID
				xbx.compare1_date = mui("#index-compare1_date")[0].innerHTML; //比较日期1
				xbx.compare2_date = mui("#index-compare2_date")[0].innerHTML; //比较日期2				

				official_login_after(url_host + 'statistics/passengerretention', xbx, 'statistics_passengerretention');
			}
			

		(function($) {
				$.init();
				var result = $('#index-compare1_date')[0];
				var btns = $('#index-compare1_date');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var _self = this;
						if(_self.picker) {
							_self.picker.show(function(rs) {
								result.innerText = rs.text;
								_self.picker.dispose();
								_self.picker = null;
							});
						} else {
							var optionsJson = this.getAttribute('data-options') || '{}';
							var options = JSON.parse(optionsJson);
							var id = this.getAttribute('id');
							/*
							 * 首次显示时实例化组件
							 * 示例为了简洁，将 options 放在了按钮的 dom 上
							 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
							 */
							_self.picker = new $.DtPicker(options);
							_self.picker.show(function(rs) {
								/*
								 * rs.value 拼合后的 value
								 * rs.text 拼合后的 text
								 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
								 * rs.m 月，用法同年
								 * rs.d 日，用法同年
								 * rs.h 时，用法同年
								 * rs.i 分（minutes 的第二个字母），用法同年
								 */
								
								if(rs.text>xtoday){
									mui.toast("不能选择大于今天的日期时间");
									rs.text=xtoday;
								};
								
								result.innerText = rs.text;
								//获取首页信息-获取客流滞留分析
								statistics_passengerretention();
								/* 
								 * 返回 false 可以阻止选择框的关闭
								 * return false;
								 */
								/*
								 * 释放组件资源，释放后将将不能再操作组件
								 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
								 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
								 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
								 */
								_self.picker.dispose();
								_self.picker = null;
							});
						}

					}, false);
				});
			})(mui);

			(function($) {
				$.init();
				var result = $('#index-compare2_date')[0];
				var btns = $('#index-compare2_date');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var _self = this;
						if(_self.picker) {
							_self.picker.show(function(rs) {
								result.innerText = rs.text;
								_self.picker.dispose();
								_self.picker = null;
							});
						} else {
							var optionsJson = this.getAttribute('data-options') || '{}';
							var options = JSON.parse(optionsJson);
							var id = this.getAttribute('id');
							/*
							 * 首次显示时实例化组件
							 * 示例为了简洁，将 options 放在了按钮的 dom 上
							 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
							 */
							_self.picker = new $.DtPicker(options);
							_self.picker.show(function(rs) {
								/*
								 * rs.value 拼合后的 value
								 * rs.text 拼合后的 text
								 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
								 * rs.m 月，用法同年
								 * rs.d 日，用法同年
								 * rs.h 时，用法同年
								 * rs.i 分（minutes 的第二个字母），用法同年
								 */
								if(rs.text>xtoday){
									mui.toast("不能选择大于今天的日期时间");
									rs.text=xtoday;
								};
								
								result.innerText = rs.text;
								//获取首页信息-获取客流滞留分析
								statistics_passengerretention();								
								/* 
								 * 返回 false 可以阻止选择框的关闭
								 * return false;
								 */
								/*
								 * 释放组件资源，释放后将将不能再操作组件
								 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
								 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
								 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
								 */
								_self.picker.dispose();
								_self.picker = null;
							});
						}

					}, false);
				});
			})(mui);		
		</script>
	</body>

</html>